<script setup>
import OApageheader from '../../components/OApageheader.vue';
import {ref,reactive,onMounted,computed,watch} from 'vue';
import {ElMessage} from 'element-plus';
import apiClient from '../../api/api';
import OAMain from '../../components/OAMain.vue';
import OAdialog from '../../components/OAdialog.vue';
import { useAuthStore } from '../../stores/auth.js'; // 导入 auth 模块的 store
import { useRoute } from 'vue-router'; // 导入路由模块的 useRoute 函数

const route = useRoute(); // 获取路由对象

let inform = reactive({ // 通知数据对象，用于存储通知数据
  title: '', // 标题
  content: '', // 内容
  create_time: '', // 创建时间
  author: { // 作者
    realname: '', // 作者姓名
    department: { // 作者部门
      name: '', // 部门名称
    },
  },
});

onMounted(async() => { // 页面加载时，获取通知数据
  try {
    const id = route.params.pk; // 获取路由参数中的pk
    const res = await apiClient.get(`inform/informs/${id}/`); // 获取通知数据
    Object.assign(inform, res.data); // 将通知数据赋值给inform对象

    // 处理已读
    await apiClient.post('inform/read/',{
        inform_pk: id, // 通知ID
    }); 

  }catch (error) {
      ElMessage.error(error.message);
  }
})

</script>

<template>
  <OAMain>
     <OApageheader content="通知详情"></OApageheader>
     <el-card>
        <template #header>
            <div style="text-align: center;">
                <h2>{{ inform.title }} </h2>
                <div>
                    <span style="margin-right: 30px;">发布时间：{{ inform.create_time }}</span>
                    <span style="margin-right: 20px;">发布者：{{ inform.author.realname }}</span>
                    <span>部门：{{ inform.author.department.name }}</span>
                </div>
            </div>
        </template>
        <template #default>
                <div v-html="inform.content" class="content"></div>
        </template>
        <template #footer>
            阅读量：{{ inform.read_count  }}
        </template>

     </el-card>
  </OAMain>
</template>

<style scoped>
.content :deep(img) {
    max_width: 100%;
  
}
</style>
